<template>
	<view>
		<view>
			<template>
				<view class="sticky-item">
					<picker mode="date" :value="date.value" :start="date.start" :end="date.end" fields="month" @change="bindTimeChange">
						<view class="date">{{date.value}}</view>
					</picker>
					<view class="amount">
						<view>支出 ￥{{totalMoney/100}}</view>
					</view>
				</view>
			</template>
			<view class="qiun-charts margin-top">
				<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
			</view>
			<view class="margin-top">
				<tui-list-view title="消费排行" class="tui-list-view">
					<view  v-for="(v,k) in list" :key="k">
						<tui-list-cell :arrow="false" class="tui-list">
							<view class="tui-list-cell-name">{{v.name}}</view>
							<tui-tag size="small" type="light-green" shape="circle" class="tui-right">
								占总支出的{{Math.floor((v.data/100)/(totalMoney/100)*100*100)/100}}%
							</tui-tag>
						</tui-list-cell>
						<cmd-progress :show-info="false" :percent="Math.floor((v.data/100)/(totalMoney/100)*100*100)/100"></cmd-progress>
					</view>
					
				</tui-list-view>
			</view>
		</view>
	</view>
</template>

<script>
	var self;
	var canvaPie=null;
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiSticky from "@/components/sticky/sticky"
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	import cmdProgress from "@/js_sdk/cmd-progress/cmd-progress.vue"
	import url from "../../common/url.js"
	import common from "../../common/common.js"
	export default {
		components:{
			tuiSticky,
			tuiListView,
			tuiListCell,
			cmdProgress
		},
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				serverData:'',
				list:[],
				totalMoney:0,
				
				//时间
				date:{
					value:'',
					start:'2000-01-01',
					end:'2099-01-01'
				}
			}
		},
		onLoad() {
			self = this;
			
			if(common.userInfo===null){
				uni.showToast({
				    title: '登陆后可体验所有功能哦！~~',
				    duration: 3000,
					icon:'none'
				})
			}else{
				this.init()
			}
		},
		onTabItemTap(){
			if(common.userInfo!==null){
				this.init();
			}else{
				uni.showToast({
				    title: '登陆后可体验所有功能哦！~~',
				    duration: 3000,
					icon:'none'
				})
			}
		},
		methods: {
			init(){
				this.date.value=common.time_format('Y-m',Math.round(new Date()));
				this.cWidth=uni.upx2px(750);
				this.cHeight=uni.upx2px(500);
				this.getServerData();
			},
			getServerData(){
				common.http({
					url:url.statisticsChart,
					data:{key:common.userInfo.key,date:this.date.value},
					ok(data){
						self.showPie("canvasPie",{series:data.payMode});
						self.totalMoney=data.totalMoney;
						self.list=data.payType
						uni.hideLoading();
						if(data.totalMoney<=0){
							uni.showToast({
							    title: '亲你这个月没有记录哦',
							    duration: 2000,
								icon:'none'
							});
						}
					}
				})
			},
			showPie(canvasId,chartData){
				canvaPie=new uCharts({
					$this:self,
					canvasId: canvasId,
					type: 'pie',
					fontSize:11,
					legend:{show:true},
					background:'#FFFFFF',
					pixelRatio:self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: self.cWidth*self.pixelRatio,
					height: self.cHeight*self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
						  lableWidth:15
						}
					},
				});
			},
			bindTimeChange:function(e) {
				this.date.value = e.detail.value
				
				this.getServerData()
			},
			touchPie(e){
				canvaPie.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data 
					}
				});
			}
		}
	}
</script>

<style>
page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
.qiun-padding{padding:2%; width:96%;}
.qiun-wrap{display:flex; flex-wrap:wrap;}
.qiun-rows{display:flex; flex-direction:row !important;}
.qiun-columns{display:flex; flex-direction:column !important;}
.qiun-common-mt{margin-top:10upx;}
.qiun-bg-white{background:#FFFFFF;}
.qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
.qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}
.qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}

/* sticky 容器 start */
	.sticky-item {
		width: 100%;
		height: 104rpx;
		padding: 20rpx 30rpx;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	/* sticky 容器 end */

	.date {
		height: 54rpx;
		font-size: 28rpx;
		background: #fff;
		padding: 0 28rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		/* box-shadow: 0 0 1rpx #7A7A7A; */
	}

	.date::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1rpx solid #eaeef1;
		border-radius: 60rpx;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 0;
		top: 0;
	}

	.amount {
		text-align: right;
		color: #7A7A7A;
		font-size: 24rpx;
	}
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-list-view {
		padding-top: 40upx !important
	}
	
	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}
	
	.tui-list::after {
		left: 94upx !important
	}
	
	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
	
	.logo {
		height: 40upx;
		width: 40upx;
	}
	
	.tui-flex {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-box {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-pic {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		display: block;
		margin-right: 24upx;
	}
	
	.tui-msg-item {
		max-width: 500upx;
		min-height: 80upx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34upx;
		line-height: 1;
		color: #262b3a;
	}
	
	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26upx;
		line-height: 1;
		color: #9397a4;
	}
	
	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;
	
	}
	
	.tui-msg-time {
		width: 100%;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}
	
	.tui-badge {
		width: auto
	}
	
	.tui-msg::after {
		left: 154upx !important
	}
</style>
